import "./index.scss"
import {xueliList} from '../../utils'
import React, { Component } from 'react'
import { Form, Input, Button, Select, message } from 'antd';
import {ajax} from '../../api'
import mobxdata from '../../mobx/data'
const { Option } = Select;

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 17},
};
const tailLayout = {
  wrapperCol: { offset: 4 , span: 16 },
};
export default class MineIndex extends Component {
    componentDidMount(){
        ajax.getuserinfo()
        .then(res=>{
            if(res.code==200){
                this.formRef.setFieldsValue(res.result)
            }
        })
       
    }
    onFinish = (value)=>{
        value._id = mobxdata.userinfo._id
        ajax.updateuserone(value)
        .then(res=>{
            if(res.code==200){
                this.formRef.setFieldsValue(value)
            }
        })
    }
    render() {
        return (
            <div>
                <Form {...layout} ref={el=>this.formRef=el} name="control-ref" onFinish={this.onFinish}>
                    <Form.Item name="username" label="姓名" rules={[{ required: true }]}>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="sex" label="性别" rules={[{ required: true }]}>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="phone" label="电话号码" rules={[{ required: true }]}>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="password" label="密码" rules={[{ required: true }]}>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="role" label="职位" rules={[{ required: true }]}>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="age" label="年龄" rules={[{ required: true }]}>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="xueli" label="学历" rules={[{ required: true }]}>
                        <Select
                            placeholder="请选择学历"
                            onChange={this.onGenderChange}
                            allowClear
                        >
                            {
                                xueliList.map((item,i)=>{
                                    return(
                                        <Option key={i} value={item}>{item}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                    
                    <Form.Item {...tailLayout}>
                        <Button block type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
